<template>
  <div>
    <div>
      <div class="card" style="margin-top: 10px">
        <el-table :data="data.tableData" @selection-change="handleSelectionChange" stripe>
          <el-table-column type="selection" style="border: #666666; width:10px"></el-table-column>
          <el-table-column label="订单ID" prop="id"></el-table-column>
          <el-table-column label="用户名" prop="userName"></el-table-column>
          <el-table-column label="发货地址" prop="shippingAddress"></el-table-column>
          <el-table-column label="收货地址" prop="deliveryAddress"></el-table-column>
          <el-table-column label="电话" prop="deliveryPhone"></el-table-column>
          <el-table-column label="总金额(元)" prop="totalAmount"></el-table-column>
        </el-table>
        <div style="margin-top: 10px">
          <el-pagination
              @current-change="load"
              @size-change="load"
              v-model:current-page="data.pageNum"
              v-model:page-size="data.pageSize"
              :page-sizes="[5,10,15,20]"
              background
              layout="total,sizes,prev,pager,next,jumper"
              :total="data.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted} from "vue";
import {Search} from "@element-plus/icons-vue"
import { ref } from 'vue'
import request from '@/utils/request.js';
import {ElMessage} from "element-plus";

const value2 = ref([])
const data = reactive({
  phone:null,
  tableData:[],
  pageNum:1,
  pageSize:10,
  total:0,
  userList:[],
  formVisible:false,
  form:[],
  ids:[]
})
const load = () => {
  const [startDate, endDate] = value2.value;
  const userName = JSON.parse(sessionStorage.getItem('user-name'));
  console.log('从sessionStorage获取的用户名:', userName);
  
  if (!userName) {
    ElMessage.warning('请先登录');
    return;
  }

  const params = {
    pageNum: data.pageNum,
    pageSize: data.pageSize,
    userName: userName
  };
  if(data.phone){
    params.phone=data.phone;
  }
  if (startDate && endDate) {
    params.startDate = startDate.toISOString().split('T')[0];
    params.endDate = endDate.toISOString().split('T')[0];
  }

  console.log('发送到后端的完整参数:', params);

  request.get('/dingdan/user', {
    params: params
  }).then(res => {
    console.log('后端返回的完整响应:', res);
    if (res.code === 200) {
      if (res.data && Array.isArray(res.data)) {
        console.log('返回的数据数组:', res.data);
        console.log('数据数组长度:', res.data.length);
        if (res.data.length > 0) {
          console.log('第一条数据的字段:', Object.keys(res.data[0]));
          console.log('第一条数据的值:', res.data[0]);
        }
        if (res.data.length === 0) {
          ElMessage.info('当前用户暂无订单数据');
        }
        data.tableData = res.data;
        data.total = res.data.length;
      } else {
        console.error('返回的数据格式不正确:', res.data);
        ElMessage.warning('数据格式不正确');
      }
    } else {
      console.error('请求失败:', res.message);
      ElMessage.error(res.message || '获取订单数据失败');
    }
  }).catch(error => {
    console.error('请求发生错误:', error);
    if (error.response) {
      console.error('错误响应:', error.response);
      ElMessage.error(`请求失败: ${error.response.status} - ${error.response.data?.message || '未知错误'}`);
    } else if (error.request) {
      console.error('未收到响应:', error.request);
      ElMessage.error('服务器未响应，请检查后端服务是否启动');
    } else {
      console.error('请求配置错误:', error.message);
      ElMessage.error('请求配置错误');
    }
  });
}
onMounted(() => {
  load()
})
//重置
const rest = () => {
  data.phone = null
  value2.value = []
  load()
}
// 将状态值转换为布尔类型
const convertStatusToBoolean = (form) => {
  if (form.status === '激活') {
    form.status = 1;
  } else if (form.status === '禁用') {
    form.status = 0;
  }
  return form;
}
//多选
const handleSelectionChange =(rows) =>{
  console.log(rows)
  data.ids = rows.map(row => row.id)
  console.log(data.ids)
}
</script>

<style scoped>
.demo-date-picker {
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.cards {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.12);
}
.el-form-item {
  margin-bottom: 15px;
}
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
}
</style>